<template>
  <div class="ma-content-block lg:flex justify-between">
    <!-- CRUD 组件 -->
    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm">
      <!-- 搜索区 tableSearch -->
      <template #tableSearch>
        <a-col :sm="8" :xs="24">
          <a-form-item field="uuid" label="用户ID">
            <a-input v-model="searchForm.uuid" placeholder="请输入用户ID" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :sm="8" :xs="24">
          <a-form-item field="user_keyword" label="用户信息搜索">
            <a-input v-model="searchForm.user_keyword" placeholder="请输入用户手机号/昵称" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :sm="8" :xs="24">
          <a-form-item field="order_no" label="订单号">
            <a-input v-model="searchForm.order_no" placeholder="请输入订单号" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :sm="8" :xs="24">
          <a-form-item field="payment_trade" label="支付订单号">
            <a-input v-model="searchForm.payment_trade" placeholder="请输入支付订单号" allow-clear />
          </a-form-item>
        </a-col>
        <a-col :sm="16" :xs="24">
          <a-form-item field="create_time" label="时间范围">
            <a-range-picker v-model="created_time" :showTime="true" style="width: 100%" @change="SearchTime" />
          </a-form-item>
        </a-col>
      </template>

      <!-- Table 自定义渲染 -->
      <!-- 状态列 -->
       <template #id="{ record }">
        {{ record.uuid }}/{{ record.phone || '--' }}/{{ record.nickname }}
      </template>
      
      
    </sa-table>

    <!-- 编辑表单 -->
    <edit-form ref="editRef" @success="refresh" />

    <!-- 查看表单 -->
    <view-form ref="viewRef" @success="refresh" />
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { Message } from '@arco-design/web-vue'
import EditForm from './edit.vue'
import ViewForm from './view.vue'
import api from '@/api/leader'

const crudRef = ref()
const editRef = ref()
const viewRef = ref()
const created_time = ref([])
// 搜索表单
const searchForm = ref({
  uuid: '',
  user_keyword: '',
  created_at_start_time: '',
  created_at_end_time: '',
  order_no: '',
  payment_trade: '',
})

// 搜索时间
const SearchTime = (val) => {
  searchForm.value.created_at_start_time = val[0]
  searchForm.value.created_at_end_time = val[1]
}

// 修改状态
const changeStatus = async (status, id) => {
  const response = await api.changeStatus({ id, status })
  if (response.code === 200) {
    Message.success(response.message)
    crudRef.value.refresh()
  }
}

// SaTable 基础配置
const options = reactive({
  api: api.payLogList,
  rowSelection: { showCheckedAll: true },
})

// SaTable 列配置
const columns = reactive([
  { title: '用户ID/手机/昵称', dataIndex: 'id', width:180 },
  { title: '订单号', dataIndex: 'order_no', width: 200 },
  { title: '支付单号', dataIndex: 'payment_trade', width: 240 },
  { title: '充值金额', dataIndex: 'price', width: 180 },
  { title: '支付时间', dataIndex:'payment_time', width:180},
])

// 页面数据初始化
const initPage = async () => {}

// SaTable 数据请求
const refresh = async () => {
  crudRef.value?.refresh()
}

// 页面加载完成执行
onMounted(async () => {
  initPage()
  refresh()
})
</script>
